<!-- 服务认证 -->
<template>
  <div class="servicePage">
    <div class="titleBox">
      <span>服务认证</span>
    </div>
    <div class="container">
      <div class="titleName">完成认证后，可以有效保障您的交易安全，且平台将依据法律规定及相关约定保护你的信息安全</div>
      <div class="itemListBox">
        <!-- 实名认证 -->
        <div :class="isShow?'realNameBox':'realNameBox1'">
          <div class="realNameFlex">
            <div class="realName">实名认证</div>
            <img src="./../../../../../public/img/personal/yirenzheng.png" class="realIcon" v-if="listData.is_user_status ==3">
            <img src="./../../../../../public/img/personal/weirenzheng.png" class="realIcon" v-if="listData.is_user_status ==0">
            <img src="./../../../../../public/img/personal/shenhezhong.png" class="realIcon" v-if="listData.is_user_status ==1">
            <div class="itemFlex" v-if="listData.is_user_status ==2">
            <img src="./../../../../../public/img/personal/yibohui.png" class="realIcon">
            <div class="flexName">{{listData.msg}}</div>
            </div>
          </div>
          <div class="realNameInfo">完成认证后，可以有效保障您的交易安全</div>
          <div class="subMit4" @click="goRealName" v-if="listData.is_user_status ==0">
            <div>去认证</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <div class="subMit4" v-if="listData.is_user_status ==2" @click="goRealName">
            <div>重新认证</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <div class="subMit4" v-if="listData.is_user_status ==3" @click="goHaveALook">
            <div>去看看</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <!-- 灰色按钮 -->
          <div class="subMit2" v-if="listData.is_user_status ==1">
            <div>去看看</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
        </div>
        <!-- 企业认证 -->
        <div :class="listData.is_user_status ==3&&listData.is_company==3?'enterprise1':'enterprise'">
          <div class="realNameFlex">
            <div class="realName">企业认证</div>
            <img src="./../../../../../public/img/personal/yirenzheng.png" class="realIcon" v-if="listData.is_company_status ==3">
            <img src="./../../../../../public/img/personal/weirenzheng.png" class="realIcon" v-if="listData.is_company_status ==0">
            <img src="./../../../../../public/img/personal/shenhezhong.png" class="realIcon" v-if="listData.is_company_status ==1">
            <div class="itemFlex" v-if="listData.is_company_status ==2">
            <img src="./../../../../../public/img/personal/yibohui.png" class="realIcon" v-if="listData.is_company_status ==2">
            <div class="flexName">{{listData.company_msg}}</div>
            </div>
          </div>
          <div class="realNameInfo">尊享撮合租赁、智能监管、企业名片、免费开店等特权服务</div>
          <div class="subMit" @click="goEnterprise" 
          v-if="listData.is_company_status==0&&listData.is_company==0&&listData.is_user_status==3">
            <div>去认证</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <!-- 灰色按钮 -->
          <div class="subMit3"
          v-if="listData.is_company_status!==0&&listData.is_company_status!==2&&listData.is_company_status!==3&&listData.is_company_status==1">
            <div>去认证</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <!-- 灰色按钮 -->
          <div class="subMit3"
          v-if="listData.is_company==2||listData.is_company==1">
            <div>去认证</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <div class="subMit3"
          v-if="listData.is_user_status==0||listData.is_user_status==1||listData.is_user_status==2&&listData.is_user_status!==3">
            <div>去认证</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <div class="subMit" v-if="listData.is_company_status ==2" @click="goEnterprise">
            <div>重新认证</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <div class="subMit4" v-if="listData.is_company_status ==3" @click="goRnterpriselook">
            <div>去看看</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
        </div>
        <!-- 加入企业 -->
        <div :class="listData.is_company_status ==3&&listData.is_user_status ==3&&listData.is_company==3?'addenterprise1':'addenterprise'">
          <div class="realNameFlex">
            <div class="realName">加入企业</div>
            <img src="./../../../../../public/img/personal/yirenzheng.png" class="realIcon" v-if="listData.is_company ==3">
            <img src="./../../../../../public/img/personal/weirenzheng.png" class="realIcon" v-if="listData.is_company ==0">
            <img src="./../../../../../public/img/personal/shenhezhong.png" class="realIcon" v-if="listData.is_company ==1">
            <div class="itemFlex" v-if="listData.is_company==2">
            <img src="./../../../../../public/img/personal/yibohui.png" class="realIcon" v-if="listData.is_company ==2">
            <div class="flexName">{{listData.attend_company_msg}}</div>
            </div>
          </div>
          <div class="realNameInfo">搜索精准的已认证公司名称申请加入</div>
          <div class="subMit4" @click="addEnterprise" 
          v-if="listData.is_company==0&&listData.is_user_status==3&&listData.is_user_status!==0&&listData.is_company_status!==1&&listData.is_company_status!==2">
            <div>申请加入</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <!-- 灰色按钮 -->
          <div class="subMit2" v-if="(listData.is_company_status==1||listData.is_company_status==2)||(listData.is_company!==0&&listData.is_company==1&&listData.is_company!==2)||(listData.is_user_status!==3||listData.is_user_status==0||listData.is_user_status==1||listData.is_user_status==2)">
            <div>申请加入</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <div class="subMit4" v-if="listData.is_company==2" @click="addEnterprise">
            <div>重新认证</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
          <div class="subMit4" v-if="listData.is_company==3" @click="goCompany">
            <div>去看看</div>
            <img src="./../../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
        </div>
      </div>
      <div class="footerName">注：实名认证审核通过后可申请企业认证或加入已认证企业</div>
    </div>
  </div>
</template>6
<script >
import {getStatus} from './../../../../apis/api'
export default {
// import引入的组件需要注入到对象中才能使用
components: {},
  data() {
 // 这里存放数据
    return {
      isShow:false,
      listData:{},
    }
  },
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
  // 1.实名认证通过后才能去企业认证或者加入企业
  // 2.实名认证通过后加入企业也直接通过认证
  // 3.加入企业通过后企业认证也一起通过认证
  
  // 去实名认证
  goRealName(){
    this.$router.push({path:'/realNameInfo'})
  },
  // 去企业认证
  goEnterprise(){
    this.$router.push({path:'/enterpriseCertification'})
  },
  // 加入企业
  addEnterprise(){
    this.$router.push({path:'/addEnterprise'})
  },
  // 加入企业去看看
  goCompany(){
    this.$router.push({path:'/addEnterpriseInfo'})
  },
  // 提交实名认证
  async getStatus(){
    let res = await getStatus()
    if(res.data.result == '1'){
      this.listData = res.data.body
    }
  },
  // 实名认证去看看
  goHaveALook(){
    this.$router.push({path:'/realNameInfoData'})
  },
  // 企业认证去看看
  goRnterpriselook(){
    this.$router.push({path:'/enterpriseCertificationInfo'})
  },
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.getStatus()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.servicePage{
  width: 920px;
  margin-left: 20px;
}
.titleBox{
  width: 100%;
  background: #fff;
  height: 56px;
  line-height: 56px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  span{
    margin-left: 20px;
  }
}
.container{
  margin-top: 20px;
  width: 920px;
  height: 602px;
  background: #FFFFFF;
}
.titleName{
  font-size: 14px;
  color: #333;
  margin-left: 20px;
  padding-top: 30px;
  box-sizing: border-box;
}
.itemListBox{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 20px;
}
// 灰色的背景图
.realNameBox{
  background: url('https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Personal/service1.png') no-repeat;
  background-size: 100%,100%;
  width: 273px;
  height: 164px;
  position: relative;
  cursor: pointer;
}
// 黄色的背景图
.realNameBox1{
  background: url('https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Personal/service.png') no-repeat;
  background-size: 100%,100%;
  width: 273px;
  height: 164px;
  position: relative;
  cursor: pointer;
}
// 灰色的背景图
.enterprise{
  background: url('https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Personal/service1.png') no-repeat;
  background-size: 100%,100%;
  width: 273px;
  height: 164px;
  position: relative;
  cursor: pointer;
}
// 黄色的背景图
.enterprise1{
  background: url('https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Personal/service.png') no-repeat;
  background-size: 100%,100%;
  width: 273px;
  height: 164px;
  position: relative;
  cursor: pointer;
}
// 灰色的背景图 
.addenterprise{
  background: url('https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Personal/service1.png') no-repeat;
  background-size: 100%,100%;
  width: 273px;
  height: 164px;
  position: relative;
  cursor: pointer;
}
// 黄色的背景图 
.addenterprise1{
  background: url('https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Personal/service.png') no-repeat;
  background-size: 100%,100%;
  width: 273px;
  height: 164px;
  position: relative;
  cursor: pointer;
}
.realNameFlex{
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-left: 20px;
}
.realName{
  flex-shrink: 0;
  font-size: 16px;
  color: #333;
}
.realIcon{
  width: 41px;
  height: 16px;
  margin-left: 10px;
}
.realNameInfo{
  font-size: 12px;
  color: #999;
  margin-left: 20px;
  margin-top: 10px;
  margin-right: 10px;
}
.rightIcon{
  width: 37px;
  height: 11px;
  margin-left: 10px;
}
.subMit{
  width: 149px;
  height: 40px;
  background: linear-gradient(136deg, #FFB492 0%, #FF7D59 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  // margin-left: 62px;
  // margin-top: 17px;
  cursor: pointer;
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.subMit4{
  width: 149px;
  height: 40px;
  background: linear-gradient(136deg, #FFB492 0%, #FF7D59 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.subMit2{
  width: 149px;
  height: 40px;
  background: #F0F2F5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  // margin-left: 62px;
  // margin-top: 34px;
  cursor: pointer;
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.subMit3{
  width: 149px;
  height: 40px;
  background: #F0F2F5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  // margin-left: 62px;
  // margin-top: 17px;
  cursor: pointer;
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.footerName{
  font-size: 14px;
  color: #999;
  margin-left: 30px;
  margin-top: 20px;
}
.itemFlex{
  display: flex;
  align-items: center;
}
.flexName{
  width: 100px;
  flex-shrink: 0;
  overflow: hidden;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 5px;
  font-size: 10px;
  color: red;
}
</style>
